<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http:www.baidu.com"></a>
    <div index="1" data-attr="2"></div>
    <input type="checkbox" checked>
    <span>1</span>

    <script src="jquery.min.js"></script>
    <script>
        // 1.element.prop()获取元素固有属性
        $('a').prop('href')
        console.log($('a').prop('href'));
        // 修改元素国有属性值
        $('a').prop('href', 'http:www.xinlang.com')
        // 2.获取自定义属性 element.attr()
        $('div').attr('index')
        // 修改自定义属性值
        $('div').attr('index', 20)
        console.log($('div').attr('index'));
        console.log($('div').attr('data-attr'));
        // 通过change事件判断checked是否被选中 返回布尔
        $('input').change(function () {
            console.log($(this).prop('checked'));
        })
        // 3.数据缓存data() 这里面的数据是存放在元素的内存里面 把元素当做变量来看  结构里是看不到的
        $('span').data('uname', 'andy')
        console.log($('span ').data('uname'));
        // 用data()获取H5自定义属性的话 跟attr有两点不同
        // 1.属性参数前不需要data-前缀 
        // 2.data()返回的是数字型
        console.log($('div').data('attr'));


    </script>
</body>

</html>